const { series, parallel } = require('gulp');
// serise 顺序执行  parallel 并发执行任务
const { src, dest } = require('gulp');
// src 需要产生流文件的文件路径 dest 需要一个路径参数作为作为输出流文件的目录
const { watch } = require("gulp");
// 监听文件修改（热更新）
const babel = require('gulp-babel');
// babel es6 => es5
const uglify = require('gulp-uglify');
//压缩js
const minHtml = require('gulp-htmlmin');
// 压缩html
const minCss = require('gulp-clean-css');
// 压缩css
const minPic = require('gulp-imagemin');
// 压缩图片
const rename = require('gulp-rename');
//文件重命名
const cleardebug = require('gulp-strip-debug');
// 清除debug console 
const connect = require('gulp-connect');
// 服务
console.log(connect)
// layui框架文件
function layuiFile() {
    return src('./layui/**/*')
        .pipe(dest('dist/layui'))
}
// 系统入口页面 index
function inletFile() {
    return src('./index.html')
        .pipe(minHtml({
            removeComments: true,                      // 清除 HTML 注释
            collapseWhitespace: true,                    // 省略空白
            collapseBooleanAttributes: true,          // 省略所有标签内的布尔属性
            removeEmptyAttributes: true,              // 清除所有标签内值为空的属性
            removeScriptTypeAttributes: true,       // 清除 <script> 标签内的 type 属性
            removeStyleLinkTypeAttributes: true,  // 清除 <style> 和 <link> 标签内的 type 属性
            minifyJS: true,                                       // 压缩 html 页面内的 js 代码
            minifyCSS: true
        }))
        .pipe(dest('dist/'))
}
// 构建html文件
function minHtmlTask() {
    return src('./src/**/*.html')
        .pipe(minHtml({
            removeComments: true,                      // 清除 HTML 注释
            collapseWhitespace: true,                    // 省略空白
            collapseBooleanAttributes: true,          // 省略所有标签内的布尔属性
            removeEmptyAttributes: true,              // 清除所有标签内值为空的属性
            removeScriptTypeAttributes: true,       // 清除 <script> 标签内的 type 属性
            removeStyleLinkTypeAttributes: true,  // 清除 <style> 和 <link> 标签内的 type 属性
            minifyJS: true,                                       // 压缩 html 页面内的 js 代码
            minifyCSS: true
        }))
        .pipe(dest('dist/src'))
}
// 构建css文件
function minCssTask() {
    return src('./src/**/*.css')
        .pipe(minCss())
        .pipe(dest('dist/src'))
}
// 构建js文件
function minJsTask() {
    return src('./src/**/*.js')
        .pipe(babel())
        .pipe(cleardebug())
        .pipe(uglify())
        .pipe(dest('dist/src'))
}
// 构建压缩图片文件
function minPicTask() {
    return src('./src/images/*')
        .pipe(minPic())
        .pipe(dest('dist/src/images'))
}

// 启动服务
function initWebServer() {
    return connect.server({
        name: 'layui',
        root: 'src',
        port: 8001,
        livereload: true
    })
}


watch(['./src/**/*'], function () {
    return src('index.html').pipe(connect.reload())
});


exports.default = series(layuiFile, inletFile, minHtmlTask, minCssTask, minJsTask, minPicTask);
exports.webserver = series(initWebServer)